<template>
  <headers></headers><br/><br/><br/>
    <div>
      
      <div class="card" style="margin-bottom: 10px;">
        <el-input style="width: 300px; margin-right: 10px" placeholder="请输入关键字查询" v-model="datatable.keyWord" prefix-icon="Search"></el-input>
        <el-button type="primary">查询</el-button>
        <el-button type="info" style="margin: 0 10px" @click="rest">重置</el-button>
      </div>
  
      <div class="card" style="margin-bottom: 10px">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="datatable.tableData">
          <el-table-column label="序号" prop="id" width="70"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="内容" prop="content">
            <template #default="scope">
              <el-button @click="showContent(scope.row)" size="mini">显示内容</el-button>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" prop="time"></el-table-column>
        
  
          <el-table-column label="是否公开">
            <template #default="scope">
             <el-switch v-model="scope.row.open" @click="changeOpen(scope.row.id,scope.row.open)"></el-switch>
            </template>
          </el-table-column>
  
          <el-table-column >
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div class="card">
        <el-pagination background layout="prev, pager, next"
        @current-change="getPages"
            v-model:current-page="datatable.pageNum" v-model:page-size="datatable.pageSize" :total="datatable.total"/>
      </div>
  
  
      <div>
        <!-- @close谈话框关闭时回调 -->
        <el-dialog width="50%" v-model="datatable.formVisible" title="公告信息" @close="closeDialog">
          <el-form :model="datatable.form" label-width="100px" label-position="right">
            <el-form-item label="公告标题" >
              <el-input v-model="datatable.form.title" autocomplete="off" />
            </el-form-item>
  
            <el-form-item label="公告内容" prop="content">
              <!-- 富文本框 -->
              <div id="editor"></div>          
            </el-form-item>
  
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="datatable.formVisible = false">取消</el-button>
              <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
        </el-dialog>
  
  
        <el-dialog width="50%" v-model="datatable.formVisible1" title="公告信息" >
            <div>
              <h4>公告标题:</h4>
              <div v-html="datatable.form1.title" autocomplete="off"></div>
            
            </div>
  
            <div class="w-e-text"> 
              <h4>公告内容:</h4>
              <div v-html="datatable.form1.content" autocomplete="off"></div>
            
            </div>
            
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="datatable.formVisible1 = false">取消</el-button>
            </span>
        </template>
        </el-dialog>
  
  
        
  
      </div>
      
    
  
    </div>
  </template>
  
  <script setup>
  import Headers from '../components/Headers.vue';
  import request from "../utils/request";
  import {reactive,onMounted,watch, nextTick} from "vue";
  import {ElMessageBox} from "element-plus";
  import { Search } from "@element-plus/icons-vue";
  import { ElMessage } from 'element-plus'
  import {useUserInfoStore} from '../stores/userInfo'
  import E from 'wangeditor'
  
  const userInfoStore=useUserInfoStore()
    const user=userInfoStore.user
  
  let editor=null //富文本框变量
  
  const datatable = reactive({
    formVisible:false,
    formVisible1:false,
    keyWord:"",
    pageNum: 1,
    pageSize:5,
    total:0,
    tableData: [
      
    ],
    form:{},
    form1:{}
  })
  
  let getPages=async()=>{
    let {data}=await request.get(`/user/selectPage?pageNum=${datatable.pageNum}&pageSize=${datatable.pageSize}&keyWord=${datatable.keyWord}`)
    datatable.tableData=data.list
    datatable.total=data.total
    
  }
  
  const handleAdd=()=>{
    datatable.form={}
  
    datatable.formVisible=true
  
    nextTick(()=>{
      editor=new E(`#editor`)
  
      editor.create()//创建富文本框
    })
  
    
  }
  
  const closeDialog=()=>{
    //销毁编辑器
    editor.destroy()
    editor=null
  }
  
  const save=()=>{
    datatable.formVisible=false
  
    datatable.form.content=editor.txt.html()//把富文本中的内容放入表格中
  
    request.post("user/addeditNotice",datatable.form).then(res=>{
      if(res.code==200){
        getPages()
        ElMessage.success("操作成功")
      }else{
        ElMessage.error(res.message)
      }
    })
    
  }
  
  const handleEdit=(row)=>{
    datatable.form=JSON.parse(JSON.stringify(row))//把当前行的值赋值给data.form
    datatable.formVisible=true
  
    nextTick(()=>{
      editor=new E(`#editor`)
  
  
      editor.create()//创建富文本框
      editor.txt.html(row.content)//把当前内容放入文本框中
    })
  }
  
  const handleDelete=(id)=>{
    ElMessageBox.confirm(
      '删除数据不可逆，确定要删除吗?','删除确认',
      {
        type: 'warning',
      }
    ).then(() => {
      request.delete(`/user/delNotice?id=${id}`).then(res=>{
        if(res.code==200){
          getPages()
          ElMessage.success("操作成功")
        }else{
          ElMessage.error(res.message)
        }
      })
      }).catch(() => {})
  }
  
  const changeOpen=(id,open)=>{
    request.get(`/user/changeOpen?id=${id}&open=${open}`).then(res=>{         //同时穿两个参数
        if(res.code==200){
          getPages()
          ElMessage.success("操作成功")
        }else{
          ElMessage.error(res.message)
        }
      })
  }
  
  const showContent=(row)=>{
    datatable.formVisible1=true
    datatable.form1=row
  }
  
  watch(()=>datatable.keyWord,()=>{
    getPages()
  })
  
  const rest=()=>{
    datatable.keyWord=""
    getPages()
  }
  
  
  
  onMounted(()=>{
    getPages()
  })
  
  
  </script>